<template>
	<!-- 双图显示组件 -->
	<view class="imageThreeComponent">
		<view class="image_list" :style="[{'paddingTop': `${newData.pageUpspacing}rpx`,'paddingBottom': `${newData.pageDownspacing}rpx`, 
			'paddingLeft': `${newData.pageLRspacing }rpx`, 'paddingRight': `${newData.pageLRspacing }rpx`}]">
			<view class="flex-sub">
				<div-base-navigator :pageUrl="newData.leftPageUrl">
					<view class="left_info"
						:style="{ paddingTop: `${newData.paddingTB }rpx`, paddingBottom: `${newData.paddingTB }rpx`,
						backgroundColor: newData.background ? newData.background.indexOf('bg-') !== -1 ? '' : newData.background : newData.background}"
						:class="newData.background ? newData.background.indexOf('bg-') !== -1 ? newData.background : '' : 'bg-' + thememobile.backgroundColor">
						<image :src="newData.leftImageUrl"
							:style="[{'height':`${newData.height}rpx`, paddingRight: `${newData.pageMiddleSpacing / 2}rpx`,paddingLeft: `${newData.paddingLR }rpx`}]"
							class="image">
						</image>
					</view>
				</div-base-navigator>
			</view>
			<view class="flex-sub">
				<div-base-navigator :pageUrl="newData.rightTopPageUrl">
					<view class="right_info"
						:style="{ paddingTop: `${newData.paddingTB }rpx`, paddingBottom: `${newData.paddingTB }rpx`,
						backgroundColor: newData.background ? newData.background.indexOf('bg-') !== -1 ? '' : newData.background : newData.background }"
						:class="newData.background ? newData.background.indexOf('bg-') !== -1 ? newData.background : '' : 'bg-' + thememobile.backgroundColor">
						<image :src="newData.rightTopImageUrl"
							:style="[{'height':`${newData.height}rpx`, paddingLeft: `${newData.pageMiddleSpacing / 2}rpx`,paddingRight: `${newData.paddingLR }rpx`}]"
							class="image">
						</image>
					</view>
				</div-base-navigator>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	import divBaseNavigator from '../div-base/div-base-navigator.vue'
	export default {
		name: 'basic-image',
		props: {
			value: {
				type: Object,
				default: () => {
					return {
						pageUrl: ``,
						imageUrl: '',
						height: 100
					}
				}
			}
		},
		components: {
			divBaseNavigator
		},
		data() {
			return {
				theme: app.globalData.theme, //全局颜色变量
				newData: this.value
			};
		},
		mounted() {
		},
		methods: {}
	}
</script>

<style scoped>
	.image_list {
		display: flex;
		justify-content: space-between;		
	}
	
	.image_list .left_info {
		border-top-left-radius: 15rpx;
		border-bottom-left-radius: 15rpx;
		font-size: 0;
	}
	
	.image_list .right_info {
		border-top-right-radius: 15rpx;
		border-bottom-right-radius: 15rpx;
		font-size: 0;
	}
	
	.image_list .image {
		width: 100%;		
	}
	

</style>